<template>
	<view class="caidan">
		<headertop title="量表评估" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<image :src="_static('/images/Mask group@2x(2).png')" class="caidanback" mode="widthFix"></image>
		<!-- 	<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view> -->
		<!-- <view class="btnstart" @click="start">
			开始测评
		</view> -->
		<view style="margin-top: 342rpx;height: 58rpx;">

		</view>
		<view class="bottombox" :style="{'height':pageheight+'px'}">
			<view class="center">
				<view class="itembox" v-for="item in list" :key="item.id" @click="idsp(item.id)">
					<view class="wwanc" v-if="boolfun(item.id)&&boolfun1(item.id)">
						未完成
					</view>
					<image :src="_static('/images/微信图片_20250703161501.png')" v-if="boolfun1(item.id)" class="back"
						mode="">
					</image>
					<image :src="_static('/images/Mask group@2x(3).png')" class="righttopicon" mode=""
						v-if="!boolfun1(item.id)"></image>
					<image :src="item.image" class="icon" mode=""></image>
					<view class="text1">
						<view :class="boolfun1(item.id)?'tt ff':'tt'">
							{{item.title}}
						</view>
						<view :class="boolfun1(item.id)?'yc ff':'yc'">
							已测：{{item.test_count}}次
						</view>
					</view>
					<view :class="boolfun1(item.id)?'text2 ff':'text2'">
						{{item.describe}}
					</view>
				</view>
			</view>
		</view>
		<userlogin @updata="init" ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		$api
	} from '../../ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const list = ref([])
	var ids = ref([])
	const userobj = ref({})
	const denglu = ref(null)
	const pageheight = ref(0)
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	onShow(() => {
		init()
		if (uni.getStorageSync('ids')) {
			ids.value = uni.getStorageSync('ids')
		}
	})

	async function userinfoinit() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}

	function start(id) {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (!userobj.value) {
			uni.showModal({
				title: '提示', // 标题（可选）
				content: '请先补全用户资料', // 内容（可选）
				confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
				success: (res) => {
					if (res.confirm) {
						// 执行确定后的逻辑
						uni.navigateTo({
							url: '/sub_index/index/bianjigerenziliao'
						})
					}
				},
				fail: (err) => {
					console.error('弹窗调用失败', err);
				}
			});

			return
		}

		if (!ids.value.length) {
			uni.showToast({
				title: '请选择测试量表，进行测评',
				icon: 'none'
			})
			return
		}
		var idd = JSON.parse(JSON.stringify(ids.value))
		uni.navigateTo({
			url: '/sub_index/index/liangbiaopnggu?id=' + id
		})

	}

	function idsp(id) {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (!userobj.value) {
			uni.showModal({
				title: '提示', // 标题（可选）
				content: '请先补全用户资料', // 内容（可选）
				confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
				success: (res) => {
					if (res.confirm) {
						// 执行确定后的逻辑
						uni.navigateTo({
							url: '/sub_index/index/bianjigerenziliao'
						})
					}
				},
				fail: (err) => {
					console.error('弹窗调用失败', err);
				}
			});

			return
		}
		var ind = ids.value.findIndex(item => item == id)
		if (ind == -1) {
			ids.value.push(id)
		}
		start(id)
	}
	async function init() {
		const res = await $api.evaluation()
		if (res.code == 1) {
			list.value = res.data
			userinfoinit()
		}
	}

	function boolfun(id) {
		var ind = ids.value.findIndex(item => item == id)

		if (ind == -1) {
			return false
		} else {
			return true
		}
	}

	function boolfun1(id) {
		var ids = uni.getStorageSync('ids')
		if (!ids) {
			ids = []
		}
		var ind = ids.findIndex(item => item == id)
		if (ind == -1) {
			return false
		} else {
			return true
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
		pageheight.value = uni.getSystemInfoSync().windowHeight - barHeight.value - statusBarHeight.value - 130
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	.ff {
		color: #FFFFFF !important;
	}

	page {
		background: #F7F8FA;
	}

	.caidan {
		width: 100%;
		position: relative;
		overflow: hidden;

		.caidanback {
			width: 100%;
			height: 478rpx;
			position: absolute;
			z-index: -1;
		}

		.btnstart {
			width: 192rpx;
			height: 58rpx;
			background: #2AB4F5;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(130, 213, 251, 0.58);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 58rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 342rpx;
			margin-left: 32rpx;
		}

		.bottombox {
			width: 100%;
			margin-top: 34rpx;
			background: #F7F8FA;
			box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(143, 217, 254, 0.68);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			height: 600rpx;
			overflow-y: scroll;

			.center {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;

				.itembox:nth-child(2n) {
					margin-right: 0rpx !important;
				}

				.itembox {
					width: 328rpx;
					height: 230rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					position: relative;
					overflow: hidden;
					background: #FFFFFF;
					margin-right: 30rpx;
					margin-bottom: 28rpx;
					z-index: 99;
					box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
					position: relative;

					.wwanc {
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						width: 100rpx;
						height: 40rpx;
						position: absolute;
						color: #F53F3F;
						right: 1%;
						top: 1%;
						z-index: 999;
						background: #fff;
						border-radius: 0 16rpx;
					}

					.back {
						position: absolute;
						width: 328rpx;
						height: 230rpx;
						z-index: -1;
					}

					.righttopicon {
						position: absolute;
						top: 0%;
						right: 0%;
						width: 118rpx;
						height: 100rpx;
					}

					.icon {
						width: 76rpx;
						height: 76rpx;
						margin-top: 18rpx;
						margin-left: 18rpx;
						z-index: 999;
					}

					.backimg {
						width: 328rpx;
						height: 208rpx;
						position: absolute;
					}

					.text2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #1D2129;
						z-index: 999;
						margin-top: 16rpx;
						width: 290rpx;
						margin-left: 18rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 限制最多显示3行 */
						overflow: hidden;
						text-overflow: ellipsis;
						/* 可选，部分浏览器不生效 */
						word-break: break-word;
					}

					.text1 {
						width: 288rpx;
						z-index: 999;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 18rpx;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;
						}

						.yc {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #86909C;
						}
					}
				}
			}
		}
	}
</style>